<template>
  <div class="app-container">
    <el-row class="card">
      <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
    </el-row>

    <div class="card">
      <el-row type="flex">
        <el-upload
          class="upload"
          :headers="upload.headers"
          :action="upload.action"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="form.personPhoto" class="avatar" :src="form.personPhoto" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="aside">
          <div class="section-title">
            <div class="divider">个人资料</div>
          </div>
          <el-form ref="form" size="small" :model="form" label-width="60px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名" prop="userId">
                  <el-cascader
                    style="width: 100%"
                    v-model="form.userId"
                    :show-all-levels="false"
                    :options="cascaderData"
                    :props="cascaderProps"
                    @change="handleChangeCascader"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学历" prop="personSchoolRecord">
                  <el-select
                    style="width: 100%"
                    v-model="form.personSchoolRecord"
                    placeholder="请选择"
                  >
                    <el-option label="小学" value="小学" />
                    <el-option label="初中" value="初中" />
                    <el-option label="高中" value="高中" />
                    <el-option label="大专" value="大专" />
                    <el-option label="本科" value="本科" />
                    <el-option label="硕士" value="硕士" />
                    <el-option label="博士" value="博士" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="出生年月"
                  prop="personBirthday"
                  label-width="90px"
                >
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.personBirthday"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="岗位" prop="personPost">
                  <el-select
                    style="width: 100%"
                    v-model="form.personPost"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in postList"
                      :key="item.index"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职称" prop="personTechnical">
                  <el-input
                    v-model="form.personTechnical"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="专业背景"
                  prop="personProfessional"
                  label-width="90px"
                >
                  <el-input
                    v-model="form.personProfessional"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="section-title">
            <div class="divider">参加学术协会团体及相关组织任兼职情况</div>
          </div>
          <el-table
            size="small"
            :show-header="false"
            :data="personConcurrentPost"
            :cell-style="{ background: '#FFFFFF' }"
          >
            <el-table-column type="index" align="center" width="80" />
            <el-table-column>
              <template slot-scope="{ row }">
                <el-input size="small" v-model="row.Post" />
              </template>
            </el-table-column>
            <el-table-column align="center" width="130">
              <template slot-scope="{ row, $index }">
                <el-button
                  v-if="personConcurrentPost.length - 1 === $index"
                  size="small"
                  type="primary"
                  icon="el-icon-plus"
                  @click="addLine($index, 1)"
                />
                <el-button
                  v-if="personConcurrentPost.length > 1"
                  size="small"
                  type="danger"
                  icon="el-icon-minus"
                  @click="delLine($index, 1)"
                />
              </template>
            </el-table-column>
          </el-table>
          <div class="section-title">
            <div class="divider">荣誉称号</div>
          </div>
          <el-table
            size="small"
            :show-header="false"
            :data="personHonoraryTitle"
            :cell-style="{ background: '#FFFFFF' }"
          >
            <el-table-column type="index" align="center" width="80" />
            <el-table-column>
              <template slot-scope="{ row }">
                <el-input size="small" v-model="row.Title" />
              </template>
            </el-table-column>
            <el-table-column align="center" width="130">
              <template slot-scope="{ row, $index }">
                <el-button
                  v-if="personHonoraryTitle.length - 1 === $index"
                  size="small"
                  type="primary"
                  icon="el-icon-plus"
                  @click="addLine($index, 2)"
                />
                <el-button
                  v-if="personHonoraryTitle.length > 1"
                  size="small"
                  type="danger"
                  icon="el-icon-minus"
                  @click="delLine($index, 2)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
    </div>

    <div class="card">
      <div class="section-title">
        <div class="divider">个人成果</div>
        <el-link
          type="primary"
          :underline="false"
          @click="visibles = true"
          :disabled="buttonShow"
        >
          同步
        </el-link>
      </div>
      <el-table
        size="small"
        :data="personAchievement"
        :cell-style="{ background: '#FFFFFF' }"
      >
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column label="成果类型" align="center">
          <template slot-scope="{ row }">
            <el-input size="small" v-model="row.parentName" />
          </template>
        </el-table-column>
        <el-table-column label="成果名称" align="center">
          <template slot-scope="{ row }">
            <el-input size="small" v-model="row.content" />
          </template>
        </el-table-column>
        <el-table-column align="center" width="130">
          <template slot-scope="{ row, $index }">
            <el-button
              v-if="personAchievement.length - 1 === $index"
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="addLine($index, 5)"
            />
            <el-button
              v-if="personAchievement.length > 1"
              size="small"
              type="danger"
              icon="el-icon-minus"
              @click="delLine($index, 5)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="card">
      <div class="section-title">
        <div class="divider">个人项目</div>
        <el-link
          type="primary"
          :underline="false"
          @click="visibles2 = true"
          :disabled="buttonShow"
        >
          同步
        </el-link>
      </div>
      <div class="point">科研项目</div>
      <el-table
        size="small"
        border
        :data="scientificProject"
        :header-cell-style="{ background: '#DDDDDD', color: '#333333' }"
        :cell-style="columnBgStyle"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="personCategory" align="center" width="120" />
        <el-table-column prop="projectCategory" align="center" width="150" />
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column label="时间" align="center" width="170">
          <template slot-scope="{ row }">
            <el-date-picker
              style="width: 100%"
              size="small"
              v-model="row.time"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="{ row }">
            <el-input size="small" v-model="row.names" />
          </template>
        </el-table-column>
        <el-table-column label="立项单位" align="center">
          <template slot-scope="{ row }">
            <el-input size="small" v-model="row.danwei" />
          </template>
        </el-table-column>
        <el-table-column align="center" width="130">
          <template slot-scope="{ row, $index }">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="addLine($index, 3, row)"
            />
            <el-button
              size="small"
              type="danger"
              icon="el-icon-minus"
              @click="delLine($index, 3, row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="point">专项资金项目</div>
      <el-table
        size="small"
        border
        :data="specialFundProject"
        :header-cell-style="{ background: '#DDDDDD', color: '#333333' }"
        :cell-style="{ background: '#FFFFFF' }"
      >
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column label="时间" align="center" width="170">
          <template slot-scope="{ row }">
            <el-date-picker
              style="width: 100%"
              size="small"
              v-model="row.time"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="{ row }">
            <el-input size="small" v-model="row.names" />
          </template>
        </el-table-column>
        <el-table-column label="立项单位" align="center">
          <template slot-scope="{ row }">
            <el-input size="small" v-model="row.danwei" />
          </template>
        </el-table-column>
        <el-table-column label="附件" align="center" width="100">
          <template slot-scope="{ row, $index }">
            <el-link
              type="primary"
              :underline="false"
              @click="view(row, $index)"
            >
              查看
            </el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" width="130">
          <template slot-scope="{ row, $index }">
            <el-button
              v-if="specialFundProject.length - 1 === $index"
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="addLine($index, 4)"
            />
            <el-button
              v-if="specialFundProject.length > 1"
              size="small"
              type="danger"
              icon="el-icon-minus"
              @click="delLine($index, 4)"
            />
          </template>
        </el-table-column>
      </el-table>

      <el-row style="margin-top: 20px" type="flex" justify="center">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-row>
    </div>

    <el-dialog
      width="40%"
      :visible.sync="visibles"
      :close-on-click-modal="false"
    >
      <el-table :data="tableData">
        <el-table-column align="center" prop="parentName" label="成果类型" />
        <el-table-column align="center" prop="content" label="成果名称" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibles = false">取 消</el-button>
        <el-button
          type="primary"
          @click="synchronous"
          :disabled="synchronousShow"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      width="40%"
      :visible.sync="visibles2"
      :close-on-click-modal="false"
    >
      <div class="border">
        <div class="borders">我负责的项目：</div>
        <el-table :data="fuzeList">
          <el-table-column align="center" prop="createTime" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime.slice(0, 11) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="projectName" label="名称" />
          <el-table-column align="center" prop="projectUnit" label="立项单位">
            <template slot-scope="{ row }">
              {{ row.projectUnit ? row.projectUnit : "暂无" }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="项目情况">
            <template slot-scope="scope">
              {{
                scope.row.projectStatus == "PROCEED"
                  ? "在研"
                  : scope.row.projectStatus == "NOT_START"
                  ? "未开始"
                  : scope.row.projectStatus == "FINISHED"
                  ? "已结题"
                  : scope.row.projectStatus == "OVERTIME"
                  ? "超时"
                  : scope.row.projectStatus == "HAND_ON"
                  ? "暂停"
                  : "终止"
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="border">
        <div class="borders">我参与的项目：</div>
        <el-table :data="canyuList">
          <el-table-column align="center" prop="createTime" label="时间" />
          <el-table-column align="center" prop="projectName" label="名称" />
          <el-table-column align="center" prop="projectUnit" label="立项单位" />
          <el-table-column align="center" label="项目情况">
            <template slot-scope="scope">
              {{
                scope.row.projectStatus == "PROCEED"
                  ? "在研"
                  : scope.row.projectStatus == "NOT_START"
                  ? "未开始"
                  : scope.row.projectStatus == "FINISHED"
                  ? "已结题"
                  : scope.row.projectStatus == "OVERTIME"
                  ? "超时"
                  : scope.row.projectStatus == "HAND_ON"
                  ? "暂停"
                  : "终止"
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibles2 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="synchronous2"
          :disabled="synchronousShow2"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      width="400px"
      :visible.sync="visible"
      :close-on-click-modal="false"
    >
      <el-upload
        :headers="upload.headers"
        :action="upload.action"
        :file-list="fileList"
        :disabled="fileList.length >= 5"
        :before-upload="beforeUpload"
        :on-preview="handlePreview"
        :on-success="handleSuccess"
        :on-remove="handleRemove"
      >
        <el-button type="primary" :disabled="fileList.length >= 5">
          上 传
        </el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import { websock } from "@/websock";
import {
  getPeopleList,
  getDetails,
  getPelples,
  getPelpleMessages,
  savePerson,
  editPerson,
} from "@/api2/keyan";
import { serverUrl } from "@/look";
import { Base64 } from "js-base64";
import { getToken } from "@/utils/auth";
const base_url = process.env.VUE_APP_BASE_APITwo;

export default {
  props: {
    rowId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      upload: {
        headers: { Authorization: getToken(), platform: 'WEB' },
        action: base_url + "/common/upload",
      },
      form: {},
      cascaderProps: {
        emitPath: false,
      },
      cascaderData: [],
      personSpanArr: [],
      projectSpanArr: [],
      postList: [],
      // 兼职情况
      personConcurrentPost: [{}],
      // 荣誉称号
      personHonoraryTitle: [{}],
      // 个人成果
      personAchievement: [{}],
      // 科研项目
      scientificProject: [
        { personCategory: "负责的", projectCategory: "已结题项目" },
        { personCategory: "负责的", projectCategory: "在研项目" },
        { personCategory: "参与的", projectCategory: "已结题项目" },
        { personCategory: "参与的", projectCategory: "在研项目" },
      ],
      // 专项资金项目
      specialFundProject: [{}],
      visible: false,
      rowIndex: 0,
      fileList: [],

      fuzeList: [],
      canyuList: [],
      visibles: false,
      visibles2: false,
      buttonShow: true,
      synchronousShow: false,
      synchronousShow2: false,
      tableData: [],
      tableData2: [],
    };
  },
  mounted() {
    this.getDetail();
    Promise.all([this.getUserList(), this.getPostList()]);
  },
  watch: {
    scientificProject: {
      handler(val) {
        this.personSpanArr = this.mergeCol("personCategory");
        this.projectSpanArr = this.mergeCol("projectCategory");
      },
      immediate: true,
    },
  },
  methods: {
    //确定同步
    synchronous() {
      this.visibles = false;
      this.personAchievement = [...this.tableData];
    },
    //确定同步
    synchronous2() {
      this.scientificProject = [];
      let fuzeList = [];
      let canyuList = [];
      this.fuzeList.forEach((item) => {
        if (item.projectStatus === "FINISHED") {
          fuzeList.push({
            personCategory: "负责的",
            projectCategory: "已结题项目",
            names: item.projectName,
            danwei: item.projectUnit,
            time: item.createTime,
          });
        } else if (item.projectStatus === "PROCEED") {
          fuzeList.push({
            personCategory: "负责的",
            projectCategory: "在研项目",
            names: item.projectName,
            danwei: item.projectUnit,
            time: item.createTime,
          });
        }
      });
      this.canyuList.forEach((item) => {
        if (item.projectStatus === "FINISHED") {
          canyuList.push({
            personCategory: "参与的",
            projectCategory: "已结题项目",
            names: item.projectName,
            danwei: item.projectUnit,
            time: item.createTime,
          });
        } else if (item.projectStatus === "PROCEED") {
          canyuList.push({
            personCategory: "参与的",
            projectCategory: "在研项目",
            names: item.projectName,
            danwei: item.projectUnit,
            time: item.createTime,
          });
        }
      });
      this.scientificProject = [...fuzeList, ...canyuList];
      if (this.scientificProject.length == 0) {
        this.scientificProject = [
          { personCategory: "负责的", projectCategory: "已结题项目" },
          { personCategory: "负责的", projectCategory: "在研项目" },
          { personCategory: "参与的", projectCategory: "已结题项目" },
          { personCategory: "参与的", projectCategory: "在研项目" },
        ];
        this.$message.error("暂无已结题项目与在研项目，无法同步！");
        return;
      }
      this.visibles2 = false;
    },
    back() {
      this.$emit("change", { componentName: "researcherList" });
    },
    columnBgStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 2) {
        return { background: "#DDDDDD", color: "#333333" };
      } else {
        return { background: "#fff" };
      }
    },
    mergeCol(prop) {
      let arr = [],
        count = 0;
      for (let i = 0; i < this.scientificProject.length; i++) {
        const item = { ...this.scientificProject[i] };
        const nextItem = { ...this.scientificProject[i + 1] };
        arr[i] = 0;
        arr[count]++;
        if (item[prop] != nextItem[prop]) {
          count = i + 1;
        }
      }
      return arr;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: this.personSpanArr[rowIndex],
          colspan: this.personSpanArr[rowIndex] ? 1 : 0,
        };
      }
      if (columnIndex === 1) {
        return {
          rowspan: this.projectSpanArr[rowIndex],
          colspan: this.projectSpanArr[rowIndex] ? 1 : 0,
        };
      }
    },
    async getUserList() {
      const res = await websock.getContactList();
      const userList = [];
      for (let i = 0; i !== res.length; i++) {
        userList.push({
          value: i + "",
          label: res[i].name,
          children: [],
        });
        for (let j = 0; j !== res[i].userList.length; j++) {
          userList[i].children.push({
            value: res[i].userList[j].uid,
            label: res[i].userList[j].name,
          });
        }
      }
      this.cascaderData = userList;
    },
    async getPostList() {
      const { data = [] } = await getPeopleList();
      this.postList = data.map((item) => item.name);
    },
    beforeAvatarUpload(file) {
      const acceptArr = ["image/jpeg", "image/png"];
      const isAccept = acceptArr.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isAccept) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isAccept && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      this.$set(this.form, "personPhoto", res.data.url);
    },
    async getDetail() {
      if (!this.rowId) return;
      const { data } = await getDetails({ id: this.rowId });
      this.$set(this.form, "personPhoto", data.personPhoto);
      this.$set(this.form, "userId", data.userId);
      this.$set(this.form, "personName", data.personName);
      this.$set(this.form, "personSchoolRecord", data.personSchoolRecord);
      this.$set(this.form, "personBirthday", data.personBirthday);
      this.$set(this.form, "personPost", data.personPost);
      this.$set(this.form, "personTechnical", data.personTechnical);
      this.$set(this.form, "personProfessional", data.personProfessional);
      this.personConcurrentPost = JSON.parse(data.personConcurrentPost) || [{}];
      this.personHonoraryTitle = JSON.parse(data.personHonoraryTitle) || [{}];
      this.personAchievement = JSON.parse(data.personAchievement) || [{}];
      this.scientificProject = JSON.parse(data.personProject) || [{}];
      const specialFundProject = JSON.parse(data.personSpecialFundProject);
      this.specialFundProject = specialFundProject || [{}];

      // 1 我负责的   2 我参与的
      Promise.all([
        this.getProjectOption(data.userId, 1),
        this.getProjectOption(data.userId, 2),
      ]);
    },
    async handleChangeCascader(userId) {
      this.buttonShow = false;
      const { data } = await getPelples(userId);
      this.$set(this.form, "personPhoto", data.tbUser.personPhoto);
      this.$set(this.form, "userId", userId);
      this.$set(this.form, "personName", data.tbUser.name);
      this.$set(this.form, "personPost", data.tbUser.conPosition.name);
      this.$set(this.form, "personTechnical", data.tbUser.zhiji);

      this.tableData = data.resultList;
      if (data.resultList.length == 0) {
        this.synchronousShow = true;
      } else {
        this.synchronousShow = false;
      }

      // 1 我负责的   2 我参与的
      Promise.all([
        this.getProjectOption(userId, 1),
        this.getProjectOption(userId, 2),
      ]);
    },
    async getProjectOption(userId, type) {
      const params = { userId, projectCategory: 0 };
      params.personCategory = type;
      const res = await getPelpleMessages(params);
      const data = res.data || [];
      if (type === 1) {
        this.fuzeList = data.map((v) => {
          const { projectName, projectUnit, createTime, projectStatus } = v;
          return { projectName, projectUnit, createTime, projectStatus };
        });
      } else {
        this.canyuList = data.map((v) => {
          const { projectName, projectUnit, createTime, projectStatus } = v;
          return { projectName, projectUnit, createTime, projectStatus };
        });
      }
    },
    addLine(idx, type, row) {
      switch (type) {
        case 1:
          this.personConcurrentPost.push({});
          break;
        case 2:
          this.personHonoraryTitle.push({});
          break;
        case 3:
          this.scientificProject.splice(idx + 1, 0, {
            personCategory: row.personCategory,
            projectCategory: row.projectCategory,
          });
          break;
        case 4:
          this.specialFundProject.push({});
          break;
        case 5:
          this.personAchievement.push({});
          break;
      }
    },
    delLine(idx, type) {
      switch (type) {
        case 1:
          this.personConcurrentPost.splice(idx, 1);
          break;
        case 2:
          this.personHonoraryTitle.splice(idx, 1);
          break;
        case 3:
          this.scientificProject.splice(idx, 1);
          break;
        case 4:
          this.specialFundProject.splice(idx, 1);
          break;
        case 5:
          this.personAchievement.splice(idx, 1);
          break;
      }
    },
    view({ url = [] }, idx) {
      this.visible = true;
      this.fileList = url.map((item) => {
        const { name, url: url } = item;
        return { name, url };
      });
      this.rowIndex = idx;
    },
    beforeUpload(rawFile) {
      const isLt10M = rawFile.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("文件大小限制在 10MB 内!");
        return false;
      }
    },
    handlePreview(e) {
      const url = encodeURIComponent(Base64.encodeURI(e.url));
      window.open(serverUrl + "onlinePreview?url=" + url);
    },
    handleSuccess(res, file) {
      if (res.code === 0) {
        const { url } = res.data;
        const { uid, name } = file;
        this.fileList.push({ name, url, uid });
        this.specialFundProject[this.rowIndex].url = this.fileList;
        this.$message.success("文件上传成功");
      } else if (res.code != 0 && res.msg) {
        this.$message.error(res.msg);
      } else {
        this.$message.error("上传失败，请重试！");
      }
    },
    handleRemove(file) {
      const idx = this.fileList.findIndex((item) => {
        return item.uid === file.uid;
      });
      this.fileList.splice(idx, 1);
      this.specialFundProject[this.rowIndex].url = this.fileList;
    },
    async submit() {
      const params = {
        kyPersonId: this.rowId,
        ...this.form,
        personConcurrentPost: JSON.stringify(this.personConcurrentPost),
        personHonoraryTitle: JSON.stringify(this.personHonoraryTitle),
        personAchievement: JSON.stringify(this.personAchievement),
        personProject: JSON.stringify(this.scientificProject),
        personSpecialFundProject: JSON.stringify(this.specialFundProject),
      };
      let fetch = this.rowId ? editPerson : savePerson;
      const res = await fetch(params);
      if (res.code == 0) {
        this.$message.success("提交成功");
        this.back();
      } else {
        this.$message.error("提交失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 15px;
  min-height: 100%;
  background-color: #f4f5fc;

  .card {
    padding: 15px 20px;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    background-color: #fff;

    & + .card {
      margin-top: 12px;
    }
  }
}

.upload {
  margin-right: 35px;
  ::v-deep .el-upload {
    border: 1px solid #d9d9d9;
  }
  .avatar {
    width: 300px;
    height: 400px;
    display: block;
  }

  .avatar-uploader-icon {
    width: 300px;
    height: 400px;
    line-height: 400px;
    font-size: 30px;
    text-align: center;
    color: #8c939d;
  }
}

.aside {
  flex: 1;
  overflow: hidden;
}

.section-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  .divider {
    font-size: 14px;
    padding-left: 10px;
    position: relative;
    color: #333;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      width: 3px;
      height: 100%;
      background-color: #3b95ff;
    }
  }
}

.point {
  line-height: 18px;
  font-size: 14px;
  margin-top: 12px;
  margin-bottom: 10px;
  padding-left: 10px;
  position: relative;
  color: #333;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #000;
  }
}

.border {
  border: 1px solid #333;
  padding: 10px;
}

.borders {
  font-size: 16px;
  font-weight: bold;
}

// 清除table底部线条
::v-deep .el-table::before {
  height: 0;
}

// 加大table间隙
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 4px solid #fff;
}

::v-deep .el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 4px solid #fff;
}
</style>
